<template>
<div class="">
    <div class="pr10">
        <div class="analyItem">
            <p class="analyItemTit tx-center">状态</p>
            <div class="analyItemCon">
                <p class="col-md-4"></p>
                <p class="col-md-4" v-if="leftInfo !== undefined">
                    <el-switch v-model="open" active-text="开启" inactive-text="关闭" @change="openOrColse()" ></el-switch>
                </p>
            </div>
        </div>
    </div>
    <div class="thinScroll pr10" v-scrollHeight="87">
        <router-link tag="div" :to="routerPath('standAddThree')" class="analyItem anItemBor" active-class="anItemBor-active">
            <p class="analyItemTit tx-center">新增</p>
            <div class="analyItemCon">
                <p class="col-md-12"><span>对科目分级(1-3级),添加执行岗</span></p>
            </div>
        </router-link>
        <router-link tag="div" :to="routerPath('standProjectThree')" class="analyItem anItemBor" active-class="anItemBor-active">
            <p class="analyItemTit tx-center">科目</p>
            <div class="analyItemCon">
                <p class="col-md-4"><span class="cLightGray pr8">科目</span> <span>{{leftInfo.name}}</span></p>
                <p class="col-md-4"><span class="cLightGray pr8">类型</span> <span>{{leftInfo.parentName}}</span></p>
                <p class="col-md-4"><span class="cLightGray pr8">状态</span> <span>{{leftInfo.del_flag === 0? '开启' : '关闭'}}</span></p>
            </div>
        </router-link>
        <router-link tag="div" :to="{path:routerPath('standThree'), query: {data:standardList}}" class="analyItem anItemBor" active-class="anItemBor-active">
            <p class="analyItemTit tx-center">罚款等级</p>
            <div class="analyItemCon">
                <div v-for="(item, index) in standardList" :key="index">
                    <p class="col-md-3">
                        <span class="cLightGray pr8">等级</span>
                        <span>{{item.grade | grade()}}</span>
                    </p>
                    <p class="col-md-3">
                        <span class="cLightGray pr8">用时</span>
                        <span>{{item.day}}天</span>
                    </p>
                    <p class="col-md-3">
                        <span class="cLightGray pr8">罚款</span>
                        <span class="cRed">{{item.fine}}元</span>
                    </p>
                    <p class="col-md-3">
                        <span class="cLightGray pr8">积分</span>
                        <span class="cRed">{{item.integral}}</span>
                    </p>
                </div>
            </div>
        </router-link>
    </div>
    <div class="pr10">
        <router-link tag="div" :to="routerPath('hander')" class="analyItem anItemBor" active-class="anItemBor-active">
            <p class="analyItemTit tx-center">处理</p>
            <div class="analyItemCon">
            </div>
        </router-link>
    </div>
</div>
</template>
<script>
import { mapMutations, mapGetters } from 'vuex'
import { getFineStandardById, openItem, closeItem } from '../Resources/Api/index'
export default {
    data () {
        return {
            standardList: [], // 标准数组
            open: false // 开启、关闭
        }
    },
    created () {
        this.getFineStandardById()
        this.open = !this.leftInfo.del_flag
    },
    computed: {
        ...mapGetters(['leftInfo', 'twoToThreeInfo', 'userInfo', 'updatePlate'])
    },
    methods: {
        ...mapMutations({
            setUpDatePlate: `SET_UPDATE_PLATE`
        }),
        // 排序
        compare (prop) {
            return function (a, b) {
                return a[prop] - b[prop]
            }
        },
        // 路由跳转路径拼接
        routerPath (path) {
            return this.$route.matched[1].path + '/' + path
        },
        // 直接进行路由跳转路径
        routerPush (path) {
            this.$router.push(this.$route.matched[1].path + '/' + path)
        },
        // 获取等级标准
        getFineStandardById () {
            let params = {
                id: this.leftInfo.id
            }
            getFineStandardById(params).then(results => {
                if (results.data.StatusCode === 1) {
                    this.standardList = results.data.Body.standardList
                    this.standardList = this.standardList.sort(this.compare('grade'))
                }
            }).catch(error => {
                console.log(error)
            })
        },
        // 开启关闭
        openOrColse () {
            let params = {
                id: this.leftInfo.id,
                userNo: this.userInfo.as_cardNo,
                userName: this.userInfo.as_fullName
            }
            if (this.open) {
                openItem(params).then(results => {
                    if (results.data.StatusCode === 1) {
                        this.Plate()
                    }
                }).catch(error => {
                    console.log(error)
                })
            } else {
                closeItem(params).then(results => {
                    if (results.data.StatusCode === 1) {
                        this.setUpDatePlate()
                    }
                }).catch(error => {
                    console.log(error)
                })
            }
        }
    },
    watch: {
        leftInfo () {
            this.getFineStandardById()
            this.open = !this.leftInfo.del_flag
        },
        updatePlate () {
            this.getFineStandardById()
        }
    },
    filters: {
        grade (index) {
            let value = ''
            switch (Number(index)) {
            case 1:
                value = '一级'
                break
            case 2:
                value = '二级'
                break
            case 3:
                value = '三级'
                break
            default:
                break
            }
            return value
        }
    }
}
</script>
<style lang="scss">
    .analyItemCon p.lineH62{
        line-height: 62px;
    }
</style>
